import React, { useState, useEffect } from 'react';

const Calendar = () => {
  const [currentDate, setCurrentDate] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);
    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setCurrentDate(new Date());
  }

  return (
    <div>
      <h2>当前日期和时间</h2>
      <p>{currentDate.toLocaleString()}</p>
    </div>
  );
};

const YourComponent = () => {
  return (
    <div>
      {/* <h4 style={{ height: "50px", display: "flex", alignItems: "center" }}>
        <p style={{ flex: "1", fontSize: "18px", marginLeft: "10px" }}>
          热点日历
        </p>
        <span className="hover-effect">更多&gt;</span>
      </h4> */}
      <div>
        <div>
          {/* 添加日历组件 */}
          <Calendar />
        </div>
      </div>
    </div>
  );
};

export default YourComponent;